<template>
	<view class="page">
		<u-navbar :isBack="true" title="推广橱窗" title-color="#101010" 
		:background="{background: '#fff'}" :borderBottom="false"></u-navbar>
		
		<view style="padding: 52rpx 52rpx 0 52rpx;display: flex;align-items: center;border-bottom: 2rpx #F5F5F5 solid;">
			<image src="@/static/logo.png" mode="aspectFill" style="width: 96rpx;height: 96rpx;border-radius: 50%;"></image>
			<view style="flex: 1;margin-left: 24rpx;font-size: 28rpx;">
				<view style="display: flex;justify-content: space-between;">
					<view style="color: #111111;font-weight: bold;">{{ userPidData.name }}</view>
					<view style="margin-left: 20rpx;" v-if="userPidData.identity == 2">
						<text style="font-size: 20rpx;color: #19be6b;background: #dbf1e1;
						padding: 4rpx 12rpx;border-radius: 8rpx;">注册用户</text>
					</view>
					<view style="margin-left: 20rpx;" v-if="userPidData.identity == 3">
						<text style="font-size: 20rpx;color: #2979ff;background: #ecf5ff;
						padding: 4rpx 12rpx;border-radius: 8rpx;">推广达人</text>
					</view>
					<view style="margin-left: 20rpx;" v-if="userPidData.identity == 4">
						<text style="font-size: 20rpx;color: #fa3534;background: #fef0f0;
						padding: 4rpx 12rpx;border-radius: 8rpx;">推广团长</text>
					</view>
					<view style="margin-left: 20rpx;" v-if="userPidData.identity == 1">
						<text style="font-size: 20rpx;color: #909399;background: #f4f4f5;
						padding: 4rpx 12rpx;border-radius: 8rpx;">普通会员</text>
					</view>
					<view style="margin-left: 20rpx;" v-if="userPidData.identity == 0">
						<text style="font-size: 20rpx;color: #ffea00;background: #fffff6;
						padding: 4rpx 12rpx;border-radius: 8rpx;">铁班底</text>
					</view>
				</view>
				<view style="display: flex;justify-content: space-between;margin-top: 16rpx;">
					<view style="color: #999CA3;">视频号：{{ userPidData.shipinhao }}</view>
				</view>
			</view>
		</view>
		<view style="display: flex;justify-content: center;padding: 40rpx;">
			<!-- <image :src="userPidData.shop_qrcode" mode="aspectFill" style="width: 320rpx;height: 320rpx;" 
			@longpress="onLongPress(userPidData.shop_qrcode)"></image> -->
			<image :src="userPidData.shop_qrcode" mode="aspectFill"
			style="width: 480rpx;height: 480rpx;" show-menu-by-longpress="true" 
			@click="previewImage"></image>
		</view>
		<view style="text-align: center;">微信扫一扫购物</view>
		<view style="text-align: center;margin-top: 20rpx;">长按二维码识别</view>
		
		<!-- <view style="position: fixed;bottom: 60rpx;width: 100%;">
			<image src="../../static/bottomimg.png" mode="widthFix" style="width: 100%;"></image>
		</view> -->
		<u-toast ref="uToast" />
		
	</view>
</template>

<script>
	import appurl_config from 'utils/config.js'
	import {request} from 'utils/request.js'
	import Vue from 'vue'
	var moment = require('moment');
	export default {
		data() {
			return {
				formData: {
					order_no: '',
					voucher_image: '',
				},
				tid: 0,
				
				userPidData: {},
				
				isAntiShake: false,
				
			}
		},
		onLoad(e) {
			// tid=3
			if(e.tid){
				this.tid = e.tid;
				this.pidData();
			}
			uni.hideShareMenu();
		},
		methods: {
			//长按识别二维码
			previewImage(e) {
				uni.previewImage({
					// 需要预览的图片链接列表。若无需预览，可以注释urls
					urls: [e.target.src],
					// 为当前显示图片的链接/索引值
					current: e.target.src,
					// 图片指示器样式	
					indicator: 'default',
					// 是否可循环预览
					loop: false,
					// 长按图片显示操作菜单，如不填默认为保存相册
					longPressActions: {
						itemList: [this.l('发送给朋友'), this.l]
					},
					success: res => {
						console.log('previewImage res', res);
					},
					fail: err => {
						console.log('previewImage err', err);
					}
				});
			},
			pidData(){
				request.getWithToken({
					url: '/user/userPidData',
					data: {id: this.tid}
				}).then(res=>{
					console.log('返回信息：', res);
					if(res.code == 1){
						this.userPidData = res.data;
					}
				})
			},
			// 上传身份证
			changeIdImage(etype) {
			    let that = this;
				let userToken = uni.getStorageSync('userToken');
			    uni.chooseImage({
			        count: 1,
			        sizeType: ['compressed'],
			        sourceType: ['album','camera'],
			        success: (chooseImageRes) => {
			            uni.uploadFile({
			                url: appurl_config.appurl + '/common/upload', //请求地址
			                filePath: chooseImageRes.tempFilePaths[0],
			                name: "file",
			                header: {
			                    // 设置请求的 header
			                    token: userToken,
			                },
			                success: (res) => {
								console.log('JSON.parse(res.data):', JSON.parse(res.data))
								that.formData[etype] = JSON.parse(res.data).data.fullurl;
								// that.profileUserInfo('avatar');
			                },
			                fail: (err) => {
			                    uni.showToast({
			                        title: err.msg,
			                        icon: 'none'
			                    })
			                    console.log('uploadFile_err: ', err);
			                },
			            });
			        }
			    });
			},
			onSubmin(){
				if(this.isAntiShake){
					return;
				}
				let params = {};
				params = this.formData;
				params.tid = this.tid;
				if(this.formData.order_no == ''){
					this.$refs.uToast.show({ title: '请填写订单号' })
					return;
				}
				this.isAntiShake = true;
				request.postWithToken({
					url: '/task/voucherAdd',
					data: params
				}).then(res=>{
					console.log('返回用户信息：', res);
					if(res.code == 1){
						setTimeout(() => {
							uni.navigateBack();
							uni.$emit('refreshHtml', {
								type: 1
							});
						}, 300);
					}else{
						this.$refs.uToast.show({ title: res.msg })
						this.isAntiShake = false;
					}
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F5F8FF !important;
	}
</style>
<style lang="scss" scoped>
	.top-box{
		background-size: 100% 100%;
	}
</style>
